<template>
  <div>
    <div class="header">
      <div class="left">
        {{ title }}
      </div>
      <div class="right">
        <span v-if="!validatenull(total)" class="summary"
          >合计数量(张): {{ total }}</span
        >
        <template v-if="disabled ? false : button">
          <el-button
            v-if="isShow"
            type="primary"
            size="mini"
            @click="oneButtonNew"
            :hidden="hiddened"
            >一 键 新 增</el-button
          >
          <el-button
            v-if="isCoinShow"
            type="primary"
            size="mini"
            @click="oneButtonNewCoin"
            :hidden="hiddened"
            >一键新增硬币钱箱</el-button
          >
          <el-button
            v-if="isPaperShow"
            type="primary"
            size="mini"
            @click="oneButtonNewPaper"
            :hidden="hiddened"
            >一键新增纸币钱箱</el-button
          >
          <el-button
            v-if="addNew"
            type="primary"
            size="mini"
            @click="addRow"
            :disabled="addDisabled"
            >新 增</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="delRow"
            :disabled="delDisabled"
            >删 除</el-button
          >
        </template>
      </div>
    </div>
    <avue-crud
      ref="crud"
      :option="dynamicOption"
      :tableLoading="tableLoading"
      :data="data"
      @selection-change="selectionChange"
      :spanMethod="spanMethod"
    >
      <template
        v-for="(item, index) in columnOption"
        slot-scope="scope"
        :slot="item.prop"
      >
        <user-select
          v-if="['user-select', 'userSelect'].includes(item.component)"
          v-bind="Object.assign(item, item.params)"
          v-model="scope.row[item.prop]"
          :row="scope.row"
          :placeholder="'请选择 ' + item.label"
        >
        </user-select>
        <ticket-name-select
          v-else-if="
            ['ticket-name-select', 'ticketNameSelect'].includes(item.component)
          "
          v-bind="Object.assign(item, item.params)"
          v-model="scope.row[item.prop]"
          :row="scope.row"
          :dic="
            ($refs.crud.cascaderDIC[scope.row.$index] || {})[item.prop] ||
              $refs.crud.DIC[item.prop]
          "
          :placeholder="'请选择 ' + item.label"
          :props="item.props"
          :disabled="item.cell !== undefined ? !item.cell : false"
        >
        </ticket-name-select>
        <ticket-select
          v-else-if="['ticket-select', 'ticketSelect'].includes(item.component)"
          v-bind="Object.assign(item, item.params)"
          v-model="scope.row[item.prop]"
          :row="scope.row"
          :dic="
            ($refs.crud.cascaderDIC[scope.row.$index] || {})[item.prop] ||
              $refs.crud.DIC[item.prop]
          "
          :placeholder="'请选择 ' + item.label"
          :props="item.props"
        >
        </ticket-select>
        <slot
          v-else
          :row="scope.row"
          :dic="scope.dic"
          :size="scope.size"
          :label="scope.label"
          :name="item.prop"
        ></slot>
      </template>
    </avue-crud>
  </div>
</template>

<script>
export default {
  name: "DynamicCrud",
  provide: {
    dynamicCrud: this
  },
  data() {
    return {
      tableSelect: []
    };
  },
  props: {
    title: String,
    option: {
      type: Object,
      default: () => {
        return {};
      }
    },
    data: {
      type: Array,
      required: true,
      default: () => {
        return [];
      }
    },
    rowAdd: Function,
    rowOneButton: Function,
    rowOneCoinButton: Function,
    rowOnePaperButton: Function,
    total: Number,
    spanMethod: Function,
    tableLoading: Boolean,
    button: {
      type: Boolean,
      default: true
    },
    isShow: {
      type: Boolean,
      default: false
    },
    isCoinShow: {
      type: Boolean,
      default: false
    },
    isPaperShow: {
      type: Boolean,
      default: false
    },
    addNew: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    addDisabled: {
      type: Boolean,
      default: false
    },
    hiddened: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    columnOption() {
      return this.option.column || [];
    },
    dynamicOption() {
      return Object.assign(
        {
          border: true,
          header: false,
          menu: false,
          tip: false,
          selection: this.disabled ? false : this.button,
          align: "center",
          headerAlign: "center",
          index: true,
          indexLabel: "序号"
        },
        this.option,
        (() => {
          var list = this.deepClone(this.columnOption);
          list.forEach(ele => {
            if (
              ["user-select", "userSelect"].includes(ele.component) ||
              ["ticket-name-select", "ticketNameSelect"].includes(
                ele.component
              ) ||
              ["ticket-select", "ticketSelect"].includes(ele.component)
            ) {
              ele.slot = true;
            }
            ele.search = false;
            ele.disabled = this.disabled;
          });
          return {
            column: list
          };
        })()
      );
    },
    delDisabled() {
      return this.tableSelect.length == 0;
    }
  },
  methods: {
    selectionChange(rows) {
      this.tableSelect = rows;
    },
    delRow() {
      if (this.tableSelect.length == 0) {
        this.$message.info("请选择要删除的记录");
        return;
      }
      this.tableSelect.forEach(row => {
        let index = this.data.indexOf(row);
        this.data.splice(index, 1);
      });
      this.$refs.crud.toggleSelection();
    },
    addRow() {
      const callback = (obj = {}) => {
        this.$refs.crud.rowCellAdd(obj);
      };
      if (typeof this.rowAdd === "function") {
        this.rowAdd(callback);
      } else {
        callback();
      }
    },
    oneButtonNew() {
      const callback = (obj = {}) => {
        this.$refs.crud.rowCellAdd(obj);
      };
      if (typeof this.rowOneButton === "function") {
        this.rowOneButton(callback);
      } else {
        callback();
      }
    },
    oneButtonNewCoin() {
      const callback1 = (obj = {}) => {
        setTimeout(() => {
          this.$refs.crud.rowCellAdd({
            tvmCode: obj.tvmCode,
            tvmCashBoxType: '2'
          });
        }, 500)
      };
      if (typeof this.rowOneCoinButton === "function") {
        this.rowOneCoinButton(callback1);
      } else {
        callback1();
      }
    },
    oneButtonNewPaper() {
      const callback2 = (obj2 = {}) => {
        setTimeout(() => {
          this.$refs.crud.rowCellAdd({
            tvmCode: obj2.tvmCode,
            tvmCashBoxType: '4'
          });
        }, 500)
      };
      if (typeof this.rowOnePaperButton === "function") {
        this.rowOnePaperButton(callback2);
      } else {
        callback2();
      }
    },
    toggleSelection(list) {
      this.$refs.crud.toggleSelection(list);
    }
  }
};
</script>

<style type="scss" scoped>
.header {
  margin: 0 auto;
  width: 99%;
  height: 40px;
  padding: 5px 10px;
  border: 1px solid #e4e4e4;
  border-bottom: none;
  background-color: #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.summary {
  margin-right: 10px;
}
</style>
